<template>
	<view class="w-full">
		<view class="px-[24rpx] pt-[100rpx]">
			<view class="text-lg text-solid mb-[50rpx]">
				律优通
			</view>
			<view class="search-wrap h-[88rpx] rounded-[18rpx] flex items-center px-[28rpx] mb-[32rpx]">
				<ufine-icon name="sousuo" color="#86909C" class="" size="22"></ufine-icon>
				<input type="text" class="h-full flex-1 text-[#86909C] pl-[10rpx]" placeholder="搜索" />
			</view>
			<view class="mb-[20rpx]">
				<swiper class="h-[360rpx]" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<image src="/src/static/test/banner.png" class="w-full" mode="widthFix"></image>
					</swiper-item>
					<swiper-item>
						<image src="/src/static/test/banner.png" class="w-full" mode="widthFix"></image>
					</swiper-item>
					<swiper-item>
						<image src="/src/static/test/banner.png" class="w-full" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="nav-wrap p-[30rpx] flex justify-between items-center rounded-[24rpx] mb-[32rpx]">
				<view class="flex flex-col justify-center items-center">
					<image src="@/static/image/n1.png" class="w-[78rpx]" mode="widthFix"></image>
					<text class="mt-[20rpx] text-[#4E5969] text-[23rpx]">合同下载</text>
				</view>
				<view class="flex flex-col justify-center items-center">
					<image src="@/static/image/n2.png" class="w-[78rpx]" mode="widthFix"></image>
					<text class="mt-[20rpx] text-[#4E5969] text-[23rpx]">合同定制</text>
				</view>
				<view class="flex flex-col justify-center items-center">
					<image src="@/static/image/n3.png" class="w-[78rpx]" mode="widthFix"></image>
					<text class="mt-[20rpx] text-[#4E5969] text-[23rpx]">在线咨询</text>
				</view>
				<view class="flex flex-col justify-center items-center">
					<image src="@/static/image/n4.png" class="w-[78rpx]" mode="widthFix"></image>
					<text class="mt-[20rpx] text-[#4E5969] text-[23rpx]">电话咨询</text>
				</view>
				<view class="flex flex-col justify-center items-center">
					<image src="@/static/image/n5.png" class="w-[78rpx]" mode="widthFix"></image>
					<text class="mt-[20rpx] text-[#4E5969] text-[23rpx]">视频面谈</text>
				</view>
			</view>
			<view class="mb-[32rpx]">
				<view class="text-[#15293E] text-[30rpx] flex justify-center mb-[24rpx]">
					法律顾问
				</view>
				<view class="flex overflow-x-scroll">
					<view class="bg-[#2F3E55] mr-[24rpx] rounded-[18rpx]" v-for="item in 5" :key="item">
						<view class="h-[330rpx] w-[240rpx] m-[10rpx] border-1 border-dashed border-[#ffffff] relative">
							<image src="/src/static/test/man.png" class="w-[220rpx]" mode="widthFix"></image>
							<view class="absolute bottom-[10rpx] flex flex-col px-[20rpx]">
								<text class="text-[26rpx] text-[#FFFFFF] mb-[10rpx]">李律师</text>
								<text class="truncate text-[22rpx] text-[#999999]">擅长劳动合同</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mb-[32rpx]">
				<view class="text-[#15293E] text-[30rpx] flex justify-center mb-[24rpx]">
					客户案例
				</view>
				<view class="px-[50rpx] py-[32rpx] rounded-[24rpx] case-wrap">
					<view class="flex justify-between items-center border-0 border-b-1 border-solid border-[#E8E8E8]">
						<view class="text-[28rpx] text-[#999999] leading-[40rpx]" :class="{'border-0 border-b-[6rpx] border-solid border-[#15293E] text-[#15293E]':activeTab == item.id}" @click="changeTab(item.id)" v-for="(item,index) in tabList" :key="index">
							{{item.title}}
						</view>
					</view>
					<view class="py-[28rpx] border-0 border-b-[1px] border-solid border-[#E8E8E8]" v-for="item in 4" :key="item">
						<view class="text-[26rpx] font-medium text-[#15293E] mb-[12rpx]">
							公司撤店谈赔偿
						</view>
						<view class="flex justify-between items-center">
							<text class="text-[#666666] truncate">公司突然撤店，明天人事过来明天人事过来</text>
							<view class="flex items-center ml-[10rpx]">
								<ufine-icon name="play" color="#979797" class="" size="16"></ufine-icon>
								<text class="text-[#999999] ml-[6rpx] text-[22rpx]">100</text>
							</view>
							<view class="flex items-center ml-[10rpx]">
								<ufine-icon name="xiaoxi" color="#979797" class="" size="16"></ufine-icon>
								<text class="text-[#999999] ml-[6rpx] text-[22rpx]">20</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, computed } from 'vue';
	const indicatorDots = ref(true);
	const autoplay = ref(true);
	const interval = ref(2000);
	const duration = ref(500);
	
	const tabList = ref([
		{
			id:1,
			title:'婚姻',
		},
		{
			id:2,
			title:'债务',
		},
		{
			id:3,
			title:'劳动',
		},
		{
			id:4,
			title:'房产',
		},
		{
			id:5,
			title:'财产',
		},
		{
			id:6,
			title:'其他',
		},
	]);
	const activeTab = ref(1);
	
	const changeTab = (id:number) =>{
		activeTab.value = id;
	}
</script>
<style>
	.search-wrap {
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.12);
	}
	.nav-wrap{
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0,0,0,0.08);
	}
	.case-wrap{
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0,0,0,0.08);
	}
</style>